let gulp = require('gulp');

//可以通过 $ 引用需要的插件,而不用通过声明 变量 require来引入 插件要gulp开头才有效
// 注意引入后 要加() 调用一下
let $ = require('gulp-load-plugins')(); 
let open = require('open');

//声明 目录变量
let app = {
    srcPath:'src/',
    devPath:'build/',
    prdPath:'dist/'
}

//  lib任务 复制 依赖的库到 指定文件夹  
//  /** 表示深度遍历此目录下的所有方便夹  * 表示所有文件 也可以 *.js表示该文件下所有js文件
gulp.task('lib', function(){
    gulp.src('bower_components/**/*.js')
    .pipe(gulp.dest(app.devPath + 'vendor'))
    .pipe(gulp.dest(app.prdPath + 'vendor'))
    .pipe($.connect.reload());
});

//  html任务 复制 html文件 指定文件夹 
gulp.task('html', function(){
    gulp.src(app.srcPath + '**/*.html')
    .pipe(gulp.dest(app.devPath))
    .pipe(gulp.dest(app.prdPath))
    .pipe($.connect.reload());
});

// json数据  是假数据 实际开发很少用，可以和后台api 联调
gulp.task('json', function(){
    gulp.src(app.srcPath + 'data/**/*.json') 
    .pipe(gulp.dest(app.devPath + 'data'))
    .pipe(gulp.dest(app.prdPath + 'data'))
    .pipe($.connect.reload());
});

// less任务  编译less文件  只编译一个主文件 其他导入的文件，会自动引入编译好
gulp.task('less', function(){
    gulp.src(app.srcPath + 'style/index.less')
    .pipe($.plumber())
    .pipe($.less())
    .pipe(gulp.dest(app.devPath + 'css'))
    .pipe($.cssmin())
    .pipe(gulp.dest(app.prdPath + 'css'))
    .pipe($.connect.reload());
});

// js任务  合并js文件 压缩js文件
gulp.task('js', function(){
    gulp.src(app.srcPath + 'script/**/*.js')
    .pipe($.plumber())
    .pipe($.concat('index.js'))
    .pipe(gulp.dest(app.devPath + 'js'))
    .pipe($.uglify())
    .pipe(gulp.dest(app.prdPath + 'js'))
    .pipe($.connect.reload());
});

//image 任务  压缩图片
gulp.task('image', function(){
    gulp.src(app.srcPath + 'image/**/*')  
    .pipe(gulp.dest(app.devPath + 'image'))
    .pipe($.imagemin())
    .pipe(gulp.dest(app.prdPath + 'image'))
    .pipe($.connect.reload());
});

//clean 清除任务  清除原来的文件,重新生成
gulp.task('clean', function(){
    gulp.src([app.devPath, app.prdPath])
    .pipe($.clean());
});

//build 总任务   执行build任务 会自动执行数组所列的任务
gulp.task('build',['image','js','less','lib','html','json']);

//server  服务器任务   启动一个实时更新的服务器  并watch文件,一但文件修改就自动构建
// 如果想自动构建后 网页自动刷新,需要在每个任务 最后添加.pipe($.connect.reload());高级浏览器才可以
gulp.task('server', ['build'], function(){
    $.connect.server({
        root:[app.devPath],
        livereload:true,
        port:6600
    });
    open('http://localhost:6600');

    
    gulp.watch('bower_components/**/*', ['lib']);
    gulp.watch(app.srcPath + '**/*.html', ['html']);
    gulp.watch(app.srcPath + 'data/**/*.json',['json']);
    gulp.watch(app.srcPath + 'style/**/*', ['less']);
    gulp.watch(app.srcPath + 'script/**/*.js', ['js']);
    gulp.watch(app.srcPath + 'image/**/*',['image']);

});

//默认方法  直接在终端输入gulp 就是调用这个方法.而这个方法调用了 
//数组所列的方法,server又调用了他的数组所列的方法
gulp.task('default',['server']);

